在網頁內嵌入地圖的需求時常會用到,以下三種是最常見的方法:
方法 | 運作方式 | 優點 | 缺點
------------- | -------------
Google Maps Embed API | iframe 嵌入地圖 | 製作簡單且呈現動態呈現 | 嵌入 iframe 效能最差
Google Static Maps API | 靜態地圖圖片 | 效能最佳 | 只是一張圖片,無法縮放、互動
Google Maps JavaScript API | 參數串接地圖 | 客製化程度最高 | 串接資料需要有一定的程式能力
補充
嵌入 iframe 效能最差,是因為網頁雖然只發出一個請求取得 iframe 的資訊,但 iframe 這個地圖網頁裡又會發出了許多請求,像是取得定位資訊、附近地點、背景底圖......等,才有辦法呈現如此多的資訊,同時也會造成網頁負擔。
Embedded Maps – Best for Beginners
At the end of the day if you just want to keep it simple using the Google Maps Embed API is your best option available. There is some downsides in terms of customisation and loading times but if you’re looking for a simple solution embedding your map is by far the easiest to do.JavaScript Maps – Best for Experts
If you have a great level of control over your website’s code and know how to use JavaScript to an intermediate level using the Google Maps JavaScript API is the best option available for you. With such a wide range of control and practical applications you can integrate a map that fulfils any purpose you need it for.Static Maps – Best overall
Google Maps Static API is the best option available overall. Out of the box using a static maps is relatively easy with fast loading times, decent customisation available and the best set up for SEO. Unless you’re looking for a very easy or highly complicated solution, using a static map is the way to go.
參考來源:
https://kiwisprout.nz/post/google-maps--embedded-static-or-js--whats-better